body{ background-color: #000;}
.bar{transition: all 0.2s ease; position: fixed; z-index: 100; left: 0; top: 50%; margin-top: -270px;}
.bar li{position: relative;}
.bar li a{display: block; width: 85px; height: 90px; line-height:70px; text-align: center; color: #fff; font-size: 14px; background: #1a1a1a; border-bottom: 1px solid #000}
.bar li a img{vertical-align: middle;}
.bar li a span{display: block; margin-top: -38px;}
.bar li:nth-child(1) a{line-height: 90px;}
.bar li.on a{ position: relative; background: #1966FF;}
.bar li.on > a:after{ 
	position: absolute;
	top: 8px;
	right: -16px;
	content: '';
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #1966FF;
}

.ask{display: none; position: absolute; left: 100px; top: 0;}
.ask textarea{ padding:10px; width: 220px; height: 120px; font-size: 12px; color: #fff; border: 1px solid #fff; border-radius: 5px; background: none;}
.bar li .ask-btn{float: right; margin-top: 4px; width: 52px; height: 24px;line-height: 24px; text-align: center; color: #fff; background: #1966FF; border-radius: 6px;}

.kua{display: none; position: absolute; left: 100px; top: 0;  padding: 0 10px 10px; width: 220px; background: #fff; border-radius: 6px;}
.kua h2{ font-weight: normal; font-size:14px; color: #333; height: 45px; line-height: 45px; border-bottom: 1px solid #e6e6e6}

.dy-item-main{ margin-top: 10px;}
.dy-item-title{ margin-top: 5px; padding-left:25px; font-size: 12px; color: #333; line-height: 1.4; background: url(../img/live_icon09.png) left top  no-repeat}
.dy-item-time{ margin-top: 5px; padding-left: 25px; font-size: 12px; color: #9598A2; line-height: 1.4;}

.dy-item .dy-item-main:nth-child(2) .dy-item-title{ background: url(../img/live_icon10.png) left top  no-repeat}

.bar li .jy-btn{ margin: 20px auto; width: 80%; height: 40px;line-height: 40px; text-align: center; color: #fff; font-size: 16px; background: #1966FF; border-radius: 6px; border-bottom: 0;}


.main{
	margin: 20px 20px 20px 360px;
	width: 1200px;
	height: 975px;
	background: #1A1A1A;
	border-radius: 4px;
}
.video-tit{
	padding: 0 15px;
	line-height: 60px;
	height: 60px;
	border-bottom: 1px solid #333;
}
.video-tit img{ vertical-align: middle; margin-right: 5px;}
.video-tit-l{ float: left; font-size: 16px; color: #fff;}
.video-tit-l a{ color: #9598A2}
.video-tit-r { float: right;}
.video-tit-r a{ margin-left: 30px; color: #fff}
.video-tit-r a:nth-child(1) img{ margin-top: -5px;}

.video-box{ position: relative; height: 460px; background-color: #383838}
.video-box-foot{ width: 100%; position: absolute; left: 0; bottom: 10px;}
.video-box-tools{ float: left; margin-left: 25px; font-size: 12px; color: #fff;}
.video-box-tools a{display: inline-block; margin-left: 25px; font-size: 12px; color: #fff; width: 82px; height: 24px;line-height: 24px;background: #FE635E;border-radius: 12px;text-align: center;}
.video-box-tools a:nth-child(2){background: #1966FF;}
.video-box-tools a:hover{opacity: 0.9;}
.video-box-tools img{ vertical-align: middle; margin-top: -3px; margin-right: 5px;}

.video-box-share{ float:right; margin-right: 25px; font-size: 12px; color: #fff;}
.video-box-share a{ margin-left: 8px;}
.video-box-share a img{ vertical-align: middle}

.video-pop{ position: absolute; left: 50%; top: 110px; margin-left: -180px; width: 361px; height: 227px; background: #fff; box-shadow: 0px 0px 7px 0px rgba(25, 102, 255, 0.15); border-radius: 4px;}
.video-pop-close{ position: absolute; right: 10px; top: 0; color: #9598A2; font-size: 28px;}
.video-pop label{ position: absolute; right: 10px; bottom: 10px; line-height: 20px; color: #9598A2; font-size: 12px;}
.video-pop label input{ position: relative;  top: 2px;}
.video-pop-left{margin-top: 50px; float: left; width: 50%; text-align: center; border-right: 1px solid #eee; box-sizing: border-box;}
.video-pop-left h2{ font-size: 14px; color: #333; font-weight: 400;}
.video-pop-left p{ margin-top: 5px; font-size: 12px; color: #9598A2;}
.video-pop-right{margin-top: 50px; float: left; width: 50%; text-align: center;}
.video-pop-right p{ margin-top: 5px; font-size: 12px; color: #9598A2;}

.eval-pop{ position: absolute; left: 120px; bottom: -300px; padding: 10px 20px 10px; width: 300px; background: #fff; box-shadow: 0px 0px 7px 0px rgba(25, 102, 255, 0.15); border-radius: 4px;}
.eval-pop-close{ position: absolute; right: 10px; top: 0; color: #9598A2; font-size: 28px;}
.eval-pop h2{ font-size: 16px; color: #1966FF; font-weight: 400;}
.eval-pop p{ margin-top: 10px; font-size: 14px; color: #333;}
.eval-pop p i{ margin: 0 2px; width: 12px; height: 12px; display: inline-block; background: url(../img/live_icon11.png) no-repeat; cursor:pointer;}
.eval-pop p i.on{background: url(../img/live_icon12.png) no-repeat;}
.eval-pop p span{font-size: 12px; color: red;}
.eval-pop textarea{ margin-top: 10px; width: 100%; padding: 10px; height: 160px; line-height: 20px; font-size: 12px;  color: #9598A2; border-radius: 4px; border: 1px solid #e5e5e5; box-sizing: border-box;}
.eval-pop-btn{ display: inline-block; margin: 10px 10%; width: 80%; height: 40px;line-height: 40px; text-align: center; color: #fff; font-size: 16px; background: #1966FF; border-radius: 20px;}

@media screen and (max-width:1580px){
    .main{width: 1000px;}
}
